<template>
	<view>
		<view class="mh-box-wrap rowCenter mb-20">
			<image :src="boxImg" style="width: 200px;height: 200px;" ></image>
			<view class="mh-change mb-20" @click="switchBox">
				<image  src="/static/img/openbox/change.png" style="width: 80px;height: 80px;" ></image>
			</view>
		</view>
		<view style="width: 200px;" class="mb-20">
			<!-- 导航栏 agents导航栏标题 -->
			<navTab ref="navTab" :tabTitle="boxList" @changeTab='changeTab'></navTab>
		</view>
		<view class="mh-box-price vertical-center mb-10">
			<text>{{currentPrice}}元/个</text>
		</view>
		<view class="rowCenter mb-20" @click="goStart">
			<image src="/static/img/openbox/start.gif" style="width: 200px;height: 100px;" ></image>
		</view>
		<view class="rowCenter mb-20" @click="testOpen">
			<image src="/static/img/openbox/test.png" style="width: 100px;height: 50px;" >
		</view>
	</view>
</template>

<script>
	import navTab from '@/components/navTab.vue';
	export default {
		components: {navTab},
		data() {
			return {
				boxId:'',
				currentBox:1,
				boxImg:'',
				currentTab:0,
				currentPrice:0,
				boxList:[]
			}
		},
		onLoad() {
			this.boxImg = `/static/img/box/box_${this.currentBox}.png`;
			this.$u.api.boxs().then(res => {
				if (res.code == 200){
					this.boxList = res.data;
					debugger
					this.currentPrice = this.boxList[0].price
					this.boxId = this.boxList[0].boxId;
					for (var i = 0; i < this.boxList.length; i++) {
						this.boxList[i].classifyName=this.boxList[i].name;
					}
				}
			});
		},
		methods: {
			testOpen(){
				debugger
				uni.navigateTo({
					url: '/pages/open/open?testFlag=true&boxId=' + this.boxId
				})
			},
			switchBox(){
				console.info('点击事件')
				this.currentBox = this.currentBox+1
				if(this.currentBox > 3){
					this.currentBox = 1;
				}
				this.boxImg = `/static/img/box/box_${this.currentBox}.png`;
			},
			changeTab(e){
				console.info(e);
				this.currentPrice = this.boxList[e].price
				this.boxId = this.boxList[e].boxId;
			},
			goStart(){
				uni.navigateTo({
					url: '/pages/open/open?isOrder=true&boxId=' + this.boxId
				})
			}
		}
	}
</script>

<style lang="scss">
/deep/.navTabBox{
	padding: 0 10px;
}
/deep/.navTabBox .longTab .underlineBox{
	display: none;
}
/deep/.navTabBox .longTab .longItem{
	background: #A3A3AA;
	border-radius: 25px;
	margin-right: 10px;
	padding: 0 10px 0 10px;
}
.mh-box-wrap{
	height: 300px;
	background: #FFFFFF;
	display: flex;
	justify-content: center;
}
.mh-change{
	display: flex;
	justify-content: flex-end;
	position: absolute;
    right: 3%;
    top: 25%;
}
.mh-box-price{
	font-size: 20px;
	color: red;
}
.category-wrap{
	display: flex;
	justify-content: space-between;
}
/deep/.navTabBox{
	background: #f0f4f7;
}
/deep/.navTabBox .click{
	//color:#2e73ff !important;
	background:#CBBF06 !important;
}

/deep/.longItem {
	color: #000000;
}
</style>
